<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue3基础语法</title>
  <!--1. 引入vue3源文件-->
  <script src="./vue.global.js"></script>
</head>
<body>
<!--下面的div是视图区-->
<div id="app">
  {{ message }}<hr>
  <input type="text" v-model="message"> <br>
  count: {{count}} <br>
  student: {{student}} <br>
  <input type="button" value="+" v-on:click="addCount">
  <input type="button" value="-" @click="minusCount">
</div>

<script>
  /**
   *   Vue 3 使用了 reactive 和 ref 来处理响应式数据。
   *   reactive 用于对象的响应式。
   *   ref 用于基本类型（字符串、数字、布尔值等）的响应式。
   */
  const { createApp, ref,reactive } = Vue
  let vs = createApp({
    setup() {
      let message = ref('我要学Vue！')
      let student = reactive({"sid":1001,"sname":"小明","sex":"男","age":22,"addr":"上海"})
      let count = ref(0)
      // 1. 添加count的值
      function addCount(){
        // reactive定义的对象，可以直接通过修改属性值的方式修改对象
        student.age = 20
        student['sname'] = '刘小明'
        count.value++
      }
      // 2. 减少count的值
      function minusCount(){
        student.age.value--
        count.value--
      }
      // 下面放的是模型区域(不论是变量还是自定义函数都要在此注册)
      return {
        message,
        count,
        student,
        addCount,
        minusCount
      }
    }
  }).mount('#app')

</script>
</body>
</html>
